<template>
  <div class="sip-manage">
    <div class = 'pbx-manage__box'>
    <div class='pbx-add__radio pbx-add__input'>
      <span>PBX：</span>
      <div class = 'pbx-add-radio__right'>
        <el-input v-model="pbxForm.PBX" disabled></el-input>
      </div>
    </div>
    <div class='pbx-add__radio pbx-add__input'>
      <span>昵称：</span>
      <div class = 'pbx-add-radio__right'>
        <el-input v-model="pbxForm.NickName"></el-input>
      </div>
    </div>
    <div class='pbx-add__radio'>
        <span>是否有外呼接口：</span>
        <div class = 'pbx-add-radio__right'>
        <el-radio-group v-model="pbxForm.IsDialoutIntegration">
          <el-radio :label="'1'">是</el-radio>
          <el-radio :label="'0'">否</el-radio>
        </el-radio-group>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span>是否有转接接口：</span>
        <div class = 'pbx-add-radio__right'>
        <el-radio-group v-model="pbxForm.IsTransferIntegration">
          <el-radio :label="'1'">是</el-radio>
          <el-radio :label="'0'">否</el-radio>
        </el-radio-group>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span>启用通话事件重发：</span>
        <div class = 'pbx-add-radio__right'>
        <el-radio-group v-model="pbxForm.DispatcherResend">
          <el-radio :label="'true'">是</el-radio>
          <el-radio :label="'false'">否</el-radio>
        </el-radio-group>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span>通话事件推送携带账户名和ID：</span>
        <div class = 'pbx-add-radio__right'>
        <el-radio-group v-model="pbxForm.DispatcherAccAndId">
          <el-radio :label="'true'">是</el-radio>
          <el-radio :label="'false'">否</el-radio>
        </el-radio-group>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span>启用录音双声道：</span>
        <div class = 'pbx-add-radio__right'>
        <el-radio-group v-model="pbxForm.SingleOrDoubleTrack">
          <el-radio :label="'true'">是</el-radio>
          <el-radio :label="'false'">否</el-radio>
        </el-radio-group>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span>启用录音识别：</span>
        <div class = 'pbx-add-radio__right'>
          <el-radio-group v-model="pbxForm.RecordRecognize">
            <el-radio :label="'true'">是</el-radio>
            <el-radio :label="'false'">否</el-radio>
          </el-radio-group>
          <p>注意：开启后，将把录音上传到云端
进行语音识别并计费，请谨慎操作</p>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span>启用三方通话进入/挂断提示：</span>
        <div class = 'pbx-add-radio__right'>
          <el-radio-group v-model="pbxForm.ThreeWayCallPrompt">
            <el-radio :label="'true'">是</el-radio>
            <el-radio :label="'false'">否</el-radio>
          </el-radio-group>
          <p>注意：开启后进行三方通话接起和挂断的
提示音播放，默认为关闭状态。</p>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span>启用呼入通话轨迹：</span>
        <div class = 'pbx-add-radio__right'>
          <el-radio-group v-model="pbxForm.IsRecordChannelCdr">
            <el-radio :label="'true'">是</el-radio>
            <el-radio :label="'false'">否</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span>电话条事件精简推送：</span>
        <div class = 'pbx-add-radio__right'>
          <el-radio-group v-model="pbxForm.SimpleAgentPushEvent">
            <el-radio :label="'false'">不精简</el-radio>
            <el-radio :label="'onlyAgent'">精简座席的</el-radio>
            <el-radio :label="'true'">全精简</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class='pbx-add__radio pbx-add__input pbx-add__input_end'>
        <span>定制归属地区号：</span>
        <div class = 'pbx-add-radio__right'>
          <el-input v-model="pbxForm.PbxCustomArea"></el-input>
        </div>
      </div>
      <div class='pbx-add__radio pbx-add__input'>
        <span></span>
        <div class = 'pbx-add-radio__right'>
          <p>注意：如果没空默认使用PBX的归属地。修改归属地后，请重新保存外呼线路。</p>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span>启用WS登录：</span>
        <div class = 'pbx-add-radio__right'>
          <el-radio-group v-model="pbxForm.LoginViaWebSocket">
            <el-radio :label="'true'">是</el-radio>
            <el-radio :label="'false'">否</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span style="padding-top:7px;">客户速挂：</span>
        <div class = 'pbx-add-radio__right'>
         在电话振铃 <el-input-number v-model.trim="pbxForm.QuickHangup" :min="1" :max="300" size="mini"></el-input-number> 秒内客户主动挂机，造成座席未成功接听电话的标记为客户速挂
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span>转接技能组时挂断：</span>
        <div class = 'pbx-add-radio__right'>
          <el-radio-group v-model="pbxForm.TransferSkillHangup">
            <el-radio :label="'true'">是</el-radio>
            <el-radio :label="'false'">否</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span>
          <el-tooltip
          transition="fade-leave"
          effect="dark"
          content="在断网，意外关机，直接关闭浏览器等情况下，自动签入离线接听"
          placement="bottom">
          <i class="icon iconfont icon-tixingweizhi"></i>
        </el-tooltip>
          异常情况签离线接听：
        </span>
        <div class = 'pbx-add-radio__right'>
          <el-radio-group v-model="pbxForm.AutoOfflineAnswer">
            <el-radio :label="'true'">是</el-radio>
            <el-radio :label="'false'">否</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span>开启测试账户被叫信任名单：</span>
        <div class = 'pbx-add-radio__right'>
          <el-radio-group v-model="pbxForm.EnableTryOutWhiteList">
            <el-radio :label="'true'">是</el-radio>
            <el-radio :label="'false'">否</el-radio>
          </el-radio-group>
          <el-input
            v-if="pbxForm.EnableTryOutWhiteList === 'true'"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入信任名单，多号码以英文“;”符号进行分割"
            v-model.trim="pbxForm.TryOutWhiteList">
          </el-input>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <span>
          <el-tooltip
          transition="fade-leave"
          effect="dark"
          content="开启风控前置，外呼号码若是黑名单号码或已达到风控上限时，页面/接口会直接提示呼叫失败。线路对被叫号码拉黑或者风控限制无法进行提示。此时系统不会产生黑名单和风控限制的通话记录，会对座席工作量报表有影响。如您的业务需要记录座席外呼工作量，建议保持关闭。*此功能需要升级 PBX 为最新版本"
          placement="bottom">
          <i class="icon iconfont icon-tixingweizhi"></i>
        </el-tooltip>
          风控前置：
        </span>
        <div class = 'pbx-add-radio__right'>
          <el-radio-group v-model="pbxForm.RMSPre">
            <el-radio :label="'true'">是</el-radio>
            <el-radio :label="'false'">否</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class='pbx-add__radio'>
        <el-button class = 'slide-box__button' type="primary" @click='saveClick' v-show = 'saveVisible'>
          保存
        </el-button>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
  import { deepClone } from '@/utils/m7Utils.js'
  import Vue from 'vue'
  export default {
    name: 'pbxManage',
    data () {
      return {
        name: 'pbxManage',
        saveVisible: false,
        backPBX: '',
        pbxForm: {
          PBX: '',
          NickName: '',
          IsDialoutIntegration: 1, // 是否有外呼接口
          IsTransferIntegration: 0, // 是否有转接接口
          DispatcherResend: false, // 启用通话事件重发
          DispatcherAccAndId: true, // 通话事件推送携带账号名和ID
          SingleOrDoubleTrack: false, // 启用录音双声道
          RecordRecognize: true, // 启用录音识别
          ThreeWayCallPrompt: true, // 启用三方通话进入/挂断提示
          IsRecordChannelCdr: false, // 启用呼入通话轨迹
          SimpleAgentPushEvent: false, // 电话条事件精简推送 精简座席的 onlyAgent 全精简 true
          LoginViaWebSocket: false, // 启用WS登录
          QuickHangup: 5, // 客户速挂
          TransferSkillHangup: true, // 启用WS登录
          AutoOfflineAnswer: true, // 异常情况签离线
          EnableTryOutWhiteList: false, // 是否开启被叫信任名单
          RMSPre: false, // 风控前置
          TryOutWhiteList: '', // 信任名单
          PbxCustomArea: '',
          Account: ''
        },
        needRequestKey: ['NickName', 'IsDialoutIntegration', 'IsTransferIntegration', 'DispatcherResend', 'DispatcherAccAndId', 'SingleOrDoubleTrack', 'RecordRecognize', 'ThreeWayCallPrompt', 'IsRecordChannelCdr', 'SimpleAgentPushEvent', 'PbxCustomArea', 'Account', 'PBX', 'LoginViaWebSocket', 'QuickHangup', 'TransferSkillHangup', 'AutoOfflineAnswer', 'RMSPre','EnableTryOutWhiteList', 'TryOutWhiteList'],
        RMSPre:null
      }
    },
    watch: {
      currentPBX () {
        let routerName = this.$route.meta.title
        let comName = this.name
        if (routerName === comName) {
          this.initPbxInfo()
        }
      }
    },
    computed: {
      currentPBX () {
        return this.$store.state.config.callCenter.currentPBX
      },
      pbxList () {
        return this.$store.state.session.account.pbx
      }
    },
    methods: {
      initPbxInfo () {
        let PBX = this.currentPBX
        if (this.pbxList && this.pbxList.length > 0) {
          for (var i = 0; i < this.pbxList.length; i++) {
            if (this.pbxList[i].PBX === PBX) {
              this.pbxForm = deepClone(this.pbxList[i])
              if (this.pbxForm.LoginViaWebSocket === undefined) { // 初始化没有这个值，需要vue.set建立关联，否则会无法change
                Vue.set(this.pbxForm, 'LoginViaWebSocket', 'false')
              }
              this.pbxForm.QuickHangup = this.pbxForm.QuickHangup ? this.pbxForm.QuickHangup : Vue.set(this.pbxForm, 'QuickHangup', 5)
              this.pbxForm.TransferSkillHangup = this.pbxForm.TransferSkillHangup ? this.pbxForm.TransferSkillHangup : Vue.set(this.pbxForm, 'TransferSkillHangup', 'true')
              this.pbxForm.AutoOfflineAnswer = this.pbxForm.AutoOfflineAnswer ? this.pbxForm.AutoOfflineAnswer : Vue.set(this.pbxForm, 'AutoOfflineAnswer', 'true')
              this.pbxForm.RMSPre = this.pbxForm.RMSPre ? this.pbxForm.RMSPre : Vue.set(this.pbxForm, 'RMSPre', 'false')
              this.RMSPre = this.pbxForm.RMSPre ? this.pbxForm.RMSPre : 'null'
              this.pbxForm.EnableTryOutWhiteList = this.pbxForm.EnableTryOutWhiteList ? this.pbxForm.EnableTryOutWhiteList : Vue.set(this.pbxForm, 'EnableTryOutWhiteList', 'false')
              this.pbxForm.TryOutWhiteList = this.pbxForm.TryOutWhiteList ? this.pbxForm.TryOutWhiteList : Vue.set(this.pbxForm, 'TryOutWhiteList', '')
              this.saveVisible = true
            }
          }
        }
      },
      updateSessionPbx () {
        let PBX = this.currentPBX
        let newPbxArr = []
        let currentPbxObj = {}
        for (var i = 0; i < this.pbxList.length; i++) {
          if (this.pbxList[i].PBX === PBX) {
            currentPbxObj = this.pbxForm
          } else {
            newPbxArr.push(this.pbxList[i])
          }
        }
        newPbxArr.push(deepClone(currentPbxObj))
        this.$store.commit('CHANGE_SESSION_ACOUNT', {pbx: newPbxArr})
      },
      updateAccountPbx () {
        let reqData = {}
        reqData.action = 'update'
        for (var i = 0; i < this.needRequestKey.length; i++) {
          let key = this.needRequestKey[i]
          if (this.pbxForm[key]) {
            if(key == 'RMSPre') {
              console.log(this.RMSPre,this.pbxForm['RMSPre'])
              if(this.RMSPre !== this.pbxForm['RMSPre']){
                reqData[key] = this.pbxForm[key]
              } 
            } else{
              reqData[key] = this.pbxForm[key]
            }
          }
        }
        if (reqData.EnableTryOutWhiteList === 'true' && !reqData.TryOutWhiteList) {
          this.$message.error('请输入信任名单！')
          return false
        }
        if (reqData.TryOutWhiteList) {
          reqData.TryOutWhiteList = reqData.TryOutWhiteList.replace(/；/g, ';')
        }
        if (reqData.EnableTryOutWhiteList === 'true') {
          this.$confirm('请再次确定该账户开启：【测试账户被叫信任名单】功能', this.$t('public.tip'), {
            confirmButtonText: this.$t('public.confirm'),
            cancelButtonText: this.$t('public.cancel'),
            cancelButtonClass: 'primary_btn',
            confirmButtonClass: 'primary_btn',
            type: 'warning'
          }).then(() => {
            this.actionToSave(reqData)
          }).catch(() => {
          })
        } else {
          this.actionToSave(reqData)
        }
      },
      actionToSave (reqData) {
        this.$store.dispatch('saveAccountPbx', reqData).then((response) => {
          if (response.success) {
            this.updateSessionPbx()
            this.$message.success('更新成功！')
          }
        })
      },
      saveClick () {
        this.updateAccountPbx()
      }
    },
    deactivated () {
      this.backPBX = this.currentPBX
    },
    activated () {
      if (this.backPBX !== this.currentPBX) {
        this.initPbxInfo()
      }
    },
    beforeMount () {
      this.initPbxInfo()
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .icon-tixingweizhi
    border 1px solid #808080
    border-radius 50%
    display inline-block
    height 16px
    width 16px
    text-align center
    line-height 16px
    font-size 10px
    color #808080
    cursor pointer
  .sip-manage
    overflow-y auto
    height calc(100% - 48px)
    display flex
    padding 41px 0 41px
    box-sizing border-box
    flex-direction column
    align-items center
    overflow-y auto
    .pbx-manage__box
     .pbx-add__input_end
      margin-bottom 0
    .pbx-add__input
     align-items center
    .pbx-add__radio
      .pbx-add-radio__right
        .el-input
          width 60%
        width 65%
        padding-left 4px
        p
         margin-top 4px
         color #3B5998
      > span
       display block
       width 35%
       text-align right
      margin-bottom 20px
      display flex
      justify-content center
      .el-button
       padding 8px 15px 8px
</style>

